<template>
	<view>
		<view class="content">
		 <view class="left-bottom-sign"></view>
		 <view class="right-top-sign"></view>
		 
		 <view class="wrapper">
		 	<view class="left-top-sign">RESET</view>
		 	<view class="welcome">
		 		重置密码
		 	</view>
		  <view class="list">
		    <view class="list-call">
		      <image class="img" src="/static/image/1.png"></image>
		      <input class="sl-input" type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
		    </view>
		    <view class="list-call">
		      <image class="img" src="/static/image/2.png"></image>
		      <input class="sl-input" type="text" v-model="password" maxlength="32" placeholder="请输入新密码" :password="!showPassword" />
		      <image class="img" :src="showPassword?'/static/image/op.png':'/static/image/cl.png'" @tap="display"></image>
		    </view>
		    <view class="list-call">
		      <image class="img" src="/static/image/3.png"></image>
		      <input class="sl-input" type="number" v-model="code" maxlength="4" placeholder="验证码" />
		      <view class="yzm" :class="{ yzms: second>0 }" @tap="getcode">{{yanzhengma}}</view>
		    </view>
		   </view>
			
		  </view>
		  <view class="button-login" hover-class="button-hover" @tap="bindLogin()">
		    <text>修改密码</text>
		  </view>
		
		</view>
	</view>
</template>

<script>
	var _this, js;
	export default {
	  data() {
	    return {
	      phone: '',
	      second: 0,
	      code: "",
	      showPassword: false,
	      password: ''
	    }
	  },
	  onLoad() {
	    _this = this;
	  },
	  computed: {
	    yanzhengma() {
	      if (this.second == 0) {
	        return '获取验证码';
	      } else {
	        if (this.second < 10) {
	          return '重新获取0' + this.second;
	        } else {
	          return '重新获取' + this.second;
	        }
	      }
	    }
	  },
	  onUnload() {
	    this.clear()
	  },
	  methods: {
	    display() {
	      this.showPassword = !this.showPassword
	    },
	    clear(){
	      clearInterval(js)
	      js = null
	      this.second = 0
	    },
	    getcode() {
	      if (this.phone.length != 11) {
	        uni.showToast({
	          icon: 'none',
	          title: '手机号格式不正确'
	        });
	        return;
	      }
	      if (this.second > 0) {
	        return;
	      }
	      _this.second = 60;
	      js = setInterval(function() {
	        _this.second--;
	        if (_this.second == 0) {
	          _this.clear()
	        }
	      }, 1000)
	      uni.request({
	        url: 'http://***/getcode.html', //仅为示例，并非真实接口地址。
	        data: {
	          phone: this.phone,
	          type: 'forget'
	        },
	        method: 'POST',
	        dataType: 'json',
	        success: (res) => {
	          if (res.data.code != 200) {
	            uni.showToast({
	              title: res.data.msg,
	              icon: 'none'
	            });
	            _this.second = 0;
	          } else {
	            uni.showToast({
	              title: res.data.msg
	            });
	            _this.second = 60;
	            js = setInterval(function() {
	              _this.second--;
	              if (_this.second == 0) {
	                _this.clear()
	              }
	            }, 1000)
	          }
	        },fail() {
	          this.clear()
	        }
	      });
	    },
	    bindLogin() {
	      if (this.phone.length != 11) {
	        uni.showToast({
	          icon: 'none',
	          title: '手机号格式不正确'
	        });
	        return;
	      }
	      if (this.password.length < 6) {
	        uni.showToast({
	          icon: 'none',
	          title: '密码格式不正确或未输入'
	        });
	        return;
	      }
	      if (this.code.length != 4) {
	        uni.showToast({
	          icon: 'none',
	          title: '验证码不正确'
	        });
	        return;
	      }
	      uni.request({
	        url: 'http://***/forget.html',
	        data: {
	          phone: this.phone,
	          password: this.password,
	          code: this.code
	        },
	        method: 'POST',
	        dataType: 'json',
	        success: (res) => {
	          if (res.data.code != 200) {
	            uni.showToast({
	              title: res.data.msg,
	              icon: 'none'
	            });
	          } else {
	            uni.showToast({
	              title: res.data.msg
	            });
	            setTimeout(function() {
	              uni.navigateBack();
	            }, 1500)
	          }
	        }
	      });
	
	    }
	  }
	}
</script>

<style>
	.content {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	
	.left-top-sign{
		font-size: 120upx;
		color: #f8f8f8;
		position:relative;
		left: -16upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	.right-top-sign{
		position:absolute;
		top: -180upx;
		right: -180upx;
		z-index: 95;
		border: 100upx solid #b4f3e2;
		border-radius: 50%;
		padding: 100upx;
		
	}
	
	
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.left-top-sign{
		font-size: 120upx;
		top: 150upx;
		color: #f8f8f8;
		position:relative;
		left: -16upx;
	}
	.welcome{
		position:relative;
		left: 50upx;
		top: 90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.list {
	  display: flex;
	  flex-direction: column;
	  padding-top: 150rpx;
	  padding-left: 70rpx;
	  padding-right: 70rpx;
	}
	
	.list-call {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  color: #333333;
	  border-bottom: 0.5px solid #e2e2e2;
	}
	
	.list-call .img {
	  width: 40rpx;
	  height: 40rpx;
	}
	
	.list-call .sl-input {
	  flex: 1;
	  text-align: left;
	  font-size: 32rpx;
	  margin-left: 16rpx;
	}
	
	.button-login {
	  color: #FFFFFF;
	  font-size: 34rpx;
	  width: 470rpx;
	  height: 100rpx;
	  background: linear-gradient(-90deg, rgba(250, 20, 120, 1), rgba(220, 20, 180, 1));
	  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
	  border-radius: 50rpx;
	  line-height: 100rpx;
	  text-align: center;
	  margin-left: auto;
	  margin-right: auto;
	  margin-top: 150rpx;
	}
	
	.button-hover {
	  background: linear-gradient(-90deg, rgba(220, 20, 180, 0.8), rgba(250, 20, 120, 0.8));
	}
	
	.yzm {
	  color: #FF7D13;
	  font-size: 24rpx;
	  line-height: 64rpx;
	  padding-left: 10rpx;
	  padding-right: 10rpx;
	  width: auto;
	  height: 64rpx;
	  border: 1rpx solid rgba(240, 130, 20, 1);
	  border-radius: 50rpx;
	}
	
	.yzms {
	  color: #999999 !important;
	  border: 1rpx solid #999999;
	}
</style>
